<template>
  <div class="template-management-container">
    <!-- 页面标题与操作按钮 -->
    <div class="page-header">
      <div class="header-actions"></div>
    </div>

    <!-- 模板统计卡片 -->
    <StatisticsCards :statistics="statistics" :loading="statsLoading" />

    <!-- 筛选区 -->
    <FilterPanel
      :form-data="filterForm"
      @search="handleSearch"
      @reset="handleReset"
    />

    <!-- 模板列表表格 -->
    <TemplateTable
      :columns="tableColumns"
      :data="templateList"
      :loading="tableLoading"
      :pagination="pagination"
      @current-page-change="handlePageChange"
      @size-change="handleSizeChange"
      @edit="handleEditTemplate"
      @copy="handleCopyTemplate"
      @delete="handleDeleteTemplate"
      @handleCreateTemplate="handleCreateTemplate"
      @handleRefresh="handleRefresh"
    />

    <!-- 新建/编辑模板对话框 -->
    <TemplateFormDialog
      v-model="showFormDialog"
      :template-id="currentTemplateId"
      @success="handleFormSuccess"
    />

    <!-- 模板详情对话框 -->
    <TemplateDetailDialog
      v-model="showDetailDialog"
      :template-id="currentTemplateId"
      @edit="handleEditFromDetail"
      @copy="handleCopyFromDetail"
      @enable="handleEnableFromDetail"
      @disable="handleDisableFromDetail"
      @delete="handleDeleteFromDetail"
    />
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted, h } from "vue";
import { TableColumn, PaginationConfig } from "@/components/DynamicTable/types";
import {
  ElMessage,
  ElMessageBox,
  ElTag,
  ElButton,
  ElSwitch,
} from "element-plus";
import { Plus, Refresh } from "@element-plus/icons-vue";

// 组件导入
import StatisticsCards from "./components/StatisticsCards.vue";
import FilterPanel from "./components/FilterPanel.vue";
import TemplateTable from "./components/TemplateTable.vue";
import TemplateFormDialog from "./components/TemplateFormDialog.vue";
import TemplateDetailDialog from "./components/TemplateDetailDialog.vue";

// API导入
import {
  getTemplateList,
  getTemplateStatistics,
  getTemplateDetail,
  enableTemplate,
  disableTemplate,
  deleteTemplate,
  copyTemplate,
} from "../../servers";

// 表格列配置
const tableColumns = ref<TableColumn[]>([
  // {
  //   label: "序号",
  //   prop: "index",
  //   width: 60,
  //   show: true,
  //   render: (row, index) => h("span", index + 1),
  // },
  {
    label: "模板名称",
    prop: "template_name",
    show: true,
  },
  {
    label: "模板代码",
    prop: "template_code",
    show: true,
    render: (row) => {
      return h("span", { class: "monospace-text" }, row.template_code || "-");
    },
  },
  {
    label: "版本号",
    prop: "version",
    show: true,
  },
  {
    label: "状态",
    prop: "is_active",
    width: 100,
    show: true,
    render: (row) => {
      return h(ElSwitch, {
        modelValue: row.is_active,
        beforeChange: () => {
          return handleToggleStatus(row, !row.is_active);
        },
      });
    },
  },
  {
    label: "使用数量",
    prop: "usage_count",
    width: 100,
    show: true,
    render: (row) => {
      return h("span", (row.usage_count || 0).toLocaleString());
    },
  },
  {
    label: "操作",
    prop: "action",
    width: 300,
    show: true,
    render: (row) => {
      return h("div", { class: "action-buttons" }, [
        h(
          ElButton,
          {
            size: "small",
            onClick: () => handleViewDetail(row.id),
          },
          { default: () => "详情" }
        ),
        h(
          ElButton,
          {
            size: "small",
            onClick: () => handleEditTemplate(row.id),
          },
          { default: () => "编辑" }
        ),
        h(
          ElButton,
          {
            size: "small",
            onClick: () => handleCopyTemplate(row.id),
          },
          { default: () => "复制" }
        ),
        (row.usage_count || 0) === 0 &&
          h(
            ElButton,
            {
              size: "small",
              class: "text-danger",
              onClick: () => handleDeleteTemplate(row.id),
            },
            { default: () => "删除" }
          ),
      ]);
    },
  },
]);

// 分页配置
const pagination = reactive<PaginationConfig>({
  currentPage: 1,
  pageSize: 10,
  total: 0,
  pageSizes: [10, 20, 50],
  layout: "total, sizes, prev, pager, next",
  background: true,
});

// 响应式数据
const statistics = ref({
  total: 0,
  enabled: 0,
  disabled: 0,
  usage_count: 0,
});

const templateList = ref([]);
const filterForm = ref({
  name: "",
  status: "",
  keyword: "",
});

// 状态控制
const statsLoading = ref(false);
const tableLoading = ref(false);
const showFormDialog = ref(false);
const showDetailDialog = ref(false);
const currentTemplateId = ref("");

// 方法 - 获取统计数据
const fetchStatistics = async () => {
  statsLoading.value = true;
  try {
    const { data } = await getTemplateStatistics();
    // 映射接口返回的数据到组件需要的格式
    statistics.value = {
      total: data.total_templates || 0,
      enabled: data.active_templates || 0,
      disabled: data.inactive_templates || 0,
      usage_count: data.total_assets || 0,
    };
  } catch (error) {
    console.error("获取统计数据失败:", error);
    ElMessage.error("获取统计数据失败");
  } finally {
    statsLoading.value = false;
  }
};

// 辅助函数 - 构建列表请求参数
const buildRequestParams = () => {
  const { name, status, keyword } = filterForm.value;

  // 构建筛选条件
  const filters: any = {};
  if (name) {
    filters.template_name = name;
  }
  if (keyword) {
    // 关键词可以搜索模板名称或代码
    filters.template_name = keyword;
    // 如果后端支持，也可以同时搜索代码
    // filters.template_code = keyword;
  }
  if (status === "启用") {
    filters.is_active = true;
  } else if (status === "禁用") {
    filters.is_active = false;
  }

  return {
    page: pagination.currentPage,
    page_size: pagination.pageSize,
    filters: Object.keys(filters).length > 0 ? filters : undefined,
    order_by: "created_at" as const,
    order_direction: "desc" as const,
  };
};

// 方法 - 获取模板列表
const fetchTemplateList = async () => {
  tableLoading.value = true;
  try {
    const params = buildRequestParams();
    const { data } = await getTemplateList(params);
    // 接口返回的数据结构：data.items 而不是 data.list
    templateList.value = data.items || [];
    pagination.total = data.total || 0;
  } catch (error) {
    console.error("获取模板列表失败:", error);
    ElMessage.error("获取模板列表失败");
  } finally {
    tableLoading.value = false;
  }
};

// 事件处理 - 刷新
const handleRefresh = () => {
  fetchStatistics();
  fetchTemplateList();
};

// 事件处理 - 搜索
const handleSearch = (formData) => {
  filterForm.value = formData;
  pagination.currentPage = 1;
  fetchTemplateList();
};

// 事件处理 - 重置筛选
const handleReset = () => {
  filterForm.value = {
    name: "",
    status: "",
    keyword: "",
  };
  pagination.currentPage = 1;
  fetchTemplateList();
};

// 事件处理 - 分页
const handlePageChange = (page) => {
  pagination.currentPage = page;
  fetchTemplateList();
};

const handleSizeChange = (size) => {
  pagination.pageSize = size;
  pagination.currentPage = 1;
  fetchTemplateList();
};

// 事件处理 - 新建模板
const handleCreateTemplate = () => {
  currentTemplateId.value = "";
  showFormDialog.value = true;
};

// 事件处理 - 编辑模板
const handleEditTemplate = (id) => {
  currentTemplateId.value = id;
  showFormDialog.value = true;
};

// 事件处理 - 从详情页编辑
const handleEditFromDetail = (id) => {
  showDetailDialog.value = false;
  setTimeout(() => {
    currentTemplateId.value = id;
    showFormDialog.value = true;
  }, 300);
};

// 事件处理 - 复制模板
const handleCopyTemplate = async (id) => {
  // 查找模板信息
  const template = templateList.value.find((t: any) => t.id === id);
  const templateName = template?.template_name || "模板";

  try {
    // 快速复制：使用默认命名
    const { data } = await copyTemplate({ template_id: id });

    // 显示详细成功信息
    const newTemplateName = data?.template_name || "新模板";
    const dimensionCount = data?.dimension_count || 0;
    const copiedFrom = data?.copied_from?.template_name || templateName;

    ElMessage.success({
      message: `模板复制成功！`,
      duration: 4000,
      showClose: true,
    });

    // 控制台输出详细信息
    console.log(`复制成功！新模板: ${newTemplateName}`);
    console.log(`共复制了 ${dimensionCount} 个维度`);
    console.log(`来源: ${copiedFrom}`);

    // 刷新列表和统计
    fetchTemplateList();
    fetchStatistics();
  } catch (error: any) {
    console.error("复制模板失败:", error);

    // 处理特定错误
    if (error?.code === 4001) {
      ElMessage.error(error.message || "模板代码已存在，请重试");
    } else if (error?.code === 4004) {
      ElMessage.error(error.message || "模板不存在");
    } else {
      ElMessage.error(error?.message || "模板复制失败，请稍后重试");
    }
  }
};

// 事件处理 - 从详情页复制
const handleCopyFromDetail = async (id) => {
  showDetailDialog.value = false;

  try {
    // 快速复制：使用默认命名
    const { data } = await copyTemplate({ template_id: id });

    // 显示详细成功信息
    const newTemplateName = data?.template_name || "新模板";
    const dimensionCount = data?.dimension_count || 0;
    const copiedFrom = data?.copied_from?.template_name || "模板";

    ElMessage.success({
      message: `模板复制成功！新模板: ${newTemplateName}`,
      duration: 4000,
      showClose: true,
    });

    // 控制台输出详细信息
    console.log(`复制成功！新模板: ${newTemplateName}`);
    console.log(`共复制了 ${dimensionCount} 个维度`);
    console.log(`来源: ${copiedFrom}`);

    // 刷新列表和统计
    fetchTemplateList();
    fetchStatistics();
  } catch (error: any) {
    console.error("复制模板失败:", error);

    // 处理特定错误
    if (error?.code === 4001) {
      ElMessage.error(error.message || "模板代码已存在，请重试");
    } else if (error?.code === 4004) {
      ElMessage.error(error.message || "模板不存在");
    } else {
      ElMessage.error(error?.message || "模板复制失败，请稍后重试");
    }
  }
};

// 事件处理 - 切换状态（通过 switch）
const handleToggleStatus = async (
  row: any,
  newValue: boolean
): Promise<boolean> => {
  const action = newValue ? "启用" : "禁用";
  const confirmMessage = `确定要${action}模板"${row.template_name}"吗？`;

  try {
    await ElMessageBox.confirm(confirmMessage, `确认${action}`, {
      confirmButtonText: "确认",
      cancelButtonText: "取消",
      type: "warning",
    });

    // 检查是否为默认模板（禁用时）
    if (!newValue && row.is_default) {
      ElMessage.warning("默认模板不能禁用，请先设置其他模板为默认");
      return false; // 阻止 switch 切换
    }

    // 执行启用或禁用操作
    if (newValue) {
      await enableTemplate({ template_id: row.id });
      ElMessage.success("模板启用成功");
    } else {
      await disableTemplate({ template_id: row.id });
      ElMessage.success("模板禁用成功");
    }

    // 刷新列表和统计
    fetchTemplateList();
    fetchStatistics();

    return true; // 允许 switch 切换
  } catch (error: any) {
    // 用户取消操作
    if (error === "cancel") {
      return false; // 阻止 switch 切换
    }

    // 操作失败
    console.error(`${action}模板失败:`, error);
    ElMessage.error(`模板${action}失败`);
    return false; // 阻止 switch 切换
  }
};

// 事件处理 - 启用模板（从详情页）
const handleEnableFromDetail = async (id) => {
  showDetailDialog.value = false;
  try {
    await enableTemplate({ template_id: id });
    ElMessage.success("模板启用成功");
    fetchTemplateList();
    fetchStatistics();
  } catch (error) {
    console.error("启用模板失败:", error);
    ElMessage.error("模板启用失败");
  }
};

// 事件处理 - 禁用模板（从详情页）
const handleDisableFromDetail = async (id) => {
  showDetailDialog.value = false;
  try {
    await disableTemplate({ template_id: id });
    ElMessage.success("模板禁用成功");
    fetchTemplateList();
    fetchStatistics();
  } catch (error: any) {
    console.error("禁用模板失败:", error);
    // 检查是否为默认模板的错误
    if (error?.code === 4003) {
      ElMessage.warning(
        error.message || "默认模板不能禁用，请先设置其他模板为默认"
      );
    } else {
      ElMessage.error("模板禁用失败");
    }
  }
};

// 事件处理 - 删除模板
const handleDeleteTemplate = (id) => {
  // 查找模板信息，用于显示使用情况
  const template = templateList.value.find((t: any) => t.id === id);
  const templateName = template?.template_name || "此模板";
  const usageCount = template?.usage_count || 0;

  // 如果有使用量，在确认消息中显示
  const confirmMessage =
    usageCount > 0
      ? `模板"${templateName}"正在被 ${usageCount.toLocaleString()} 个资产使用，删除后这些资产将无法使用该模板。确定要删除吗？此操作不可恢复。`
      : `确定要删除模板"${templateName}"吗？删除后不可恢复。`;

  ElMessageBox.confirm(confirmMessage, "确认删除", {
    confirmButtonText: "确认删除",
    cancelButtonText: "取消",
    type: "warning",
    dangerouslyUseHTMLString: false,
  })
    .then(async () => {
      try {
        await deleteTemplate({ template_id: id });
        ElMessage.success("模板删除成功");
        fetchTemplateList();
        fetchStatistics();
      } catch (error: any) {
        console.error("删除模板失败:", error);

        // 处理特定错误
        if (error?.code === 4003) {
          // 模板正在使用中
          const errorUsageCount = error?.data?.usage_count || usageCount;
          ElMessage.error(
            error.message ||
              `模板正在被 ${errorUsageCount.toLocaleString()} 个资产使用，无法删除。请先解除使用后再删除。`
          );
        } else if (error?.code === 4004) {
          ElMessage.error(error.message || "模板不存在");
        } else {
          ElMessage.error(error?.message || "模板删除失败，请稍后重试");
        }
      }
    })
    .catch(() => {
      // 用户取消删除
    });
};

// 事件处理 - 从详情页删除
const handleDeleteFromDetail = async (id) => {
  showDetailDialog.value = false;

  // 等待对话框关闭动画完成
  await new Promise((resolve) => setTimeout(resolve, 300));

  // 获取模板详情以显示使用情况
  let templateName = "此模板";
  let usageCount = 0;
  try {
    const { data } = await getTemplateDetail({ template_id: id });
    templateName = data?.template_name || templateName;
    usageCount = data?.usage_count || 0;
  } catch (error) {
    console.warn("获取模板详情失败:", error);
  }

  // 如果有使用量，在确认消息中显示
  const confirmMessage =
    usageCount > 0
      ? `模板"${templateName}"正在被 ${usageCount.toLocaleString()} 个资产使用，删除后这些资产将无法使用该模板。确定要删除吗？此操作不可恢复。`
      : `确定要删除模板"${templateName}"吗？删除后不可恢复。`;

  try {
    await ElMessageBox.confirm(confirmMessage, "确认删除", {
      confirmButtonText: "确认删除",
      cancelButtonText: "取消",
      type: "warning",
      dangerouslyUseHTMLString: false,
    });

    try {
      await deleteTemplate({ template_id: id });
      ElMessage.success("模板删除成功");
      fetchTemplateList();
      fetchStatistics();
    } catch (error: any) {
      console.error("删除模板失败:", error);

      // 处理特定错误
      if (error?.code === 4003) {
        // 模板正在使用中
        const errorUsageCount = error?.data?.usage_count || usageCount;
        ElMessage.error(
          error.message ||
            `模板正在被 ${errorUsageCount.toLocaleString()} 个资产使用，无法删除。请先解除使用后再删除。`
        );
      } else if (error?.code === 4004) {
        ElMessage.error(error.message || "模板不存在");
      } else {
        ElMessage.error(error?.message || "模板删除失败，请稍后重试");
      }
    }
  } catch (error: any) {
    // 用户取消删除
    if (error !== "cancel") {
      console.error("删除确认失败:", error);
    }
  }
};

// 事件处理 - 查看详情
const handleViewDetail = (id) => {
  currentTemplateId.value = id;
  showDetailDialog.value = true;
};

// 事件处理 - 表单提交成功
const handleFormSuccess = () => {
  showFormDialog.value = false;
  fetchTemplateList();
  fetchStatistics();
};

// 页面加载时初始化
onMounted(() => {
  fetchStatistics();
  fetchTemplateList();
});
</script>

<style scoped lang="scss">
.template-management-container {
  padding: 16px;
  background-color: #f5f7fa;
  min-height: 100vh;
}

.page-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  flex-wrap: wrap;
  gap: 16px;

  .page-title {
    font-size: 18px;
    font-weight: 600;
    color: #1d2129;
    display: flex;
    align-items: center;
    margin: 0;
  }

  .header-actions {
    display: flex;
    gap: 10px;
  }
}

.monospace-text {
  font-family: monospace;
  background-color: #f5f5f5;
  padding: 2px 6px;
  border-radius: 3px;
  font-size: 13px;
}

::v-deep .action-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}
</style>
